import Taro, { Component,Config} from '@tarojs/taro'
import {Text, View,Image,Input} from "@tarojs/components";
import './Search.scss'
import del from '../images/del.png'
import search from '../images/search.png'
import {getJSON} from "../../services/request";

class Search extends Component {
  config: Config = {
    navigationBarTitleText: '搜索',
  };

  state = {
    value: '',
    token: Taro.getStorageSync('token'),
    // 热搜
    hotList:[],
    type:this.$router.params.type||2,
    PH:this.$router.params.type==3?'复制标题查找优惠券':'复制标题查找优惠券',
    //历史记录
    record:Taro.getStorageSync('record')||[]  //获取搜索记录
  };

  componentDidMount(){
    const {token} =this.state;
      // getJSON('/taoke/search/hot',{token,type:1}).then(res=>{
      //   this.setState({
      //   hotList:res.data,
      //   })
      // });
  }
  //页面退出
  componentWillUnmount(){
    Taro.setStorageSync('record',[...this.state.record]);    //当页面退出时在将搜索记录保存在缓存
  }
//获取input值
  onChange =(e) =>{
    if(e.detail.value.replace(/\s/g,'')==''){ //禁止用户搜索空字符串
      this.setState({
        value:''
      });
    }else{
      this.setState({
        value: e.detail.value
      });
    }
  };
  //删除历史记录
  fnClear=()=>{
    this.setState({
      record:[]
    })
  };

  // 点击搜索按钮
  onSearch=()=> {
    if(this.state.value===''){
      Taro.showToast({title:'请输入搜索内容',icon:'none'});
      return
    } else{

      Taro.navigateTo({
        url: '/pages/classifyList/classifyList?value='+this.state.value+'&type='+this.state.type    // 跳转到搜索内容古页
      }).then(()=>{ //成功跳转之后更新 搜索记录
        if(this.state.record.length>=20){  //当搜索记录太多了，删除一些
          this.state.record.splice(0,10)
        }
        let newArr=Array.from(new Set([this.state.value,...this.state.record])); //删除重复的数据
        this.setState({
          record:newArr
        });

      });
    }

  };
  // 点击热搜词
  goValue(keyword){
    Taro.navigateTo({
      url: '/pages/classifyList/classifyList?value='+keyword+'&type='+this.state.type// 向搜索页搜索框内容
    });
  }
//tab切换
  fnBtnClick (type){
    this.setState({
      type:type,
      PH:type==2?'复制标题查找优惠券':'复制标题查找优惠券'
    });
  }

  render () {
    const{hotList,record}= this.state;

    return (
      <View className='search'>

        {/*搜索栏*/}
        <View className='TitBox'>
          <View className='inputBox'>
            <Image src={search} mode='widthFix' className='serIMG'/>
            <Input type='text' placeholder={this.state.PH} value='' className='input_style' onInput={this.onChange}/>
          </View>
          <View className='searchText' onClick={this.onSearch}>搜索</View>
        </View>

        {/*点击按钮*/}
        <View className='tabs_'>
          <View className='btnCom' onClick={this.fnBtnClick.bind(this,2)}>
            <Text className={this.state.type==2?'btn_active':''}>京东</Text>
          </View>
          <View className='btnCom' onClick={this.fnBtnClick.bind(this,3)}>
            <Text className={this.state.type==3?'btn_active':''}>拼多多</Text>
          </View>
        </View>

        <View className='search_content'>
          <View>历史纪录</View>
          <Image src={del} className='del_img' mode='widthFix' onClick={this.fnClear}/>
        </View>

        <View>
          {
            record.length == 0 ? '' : (
              <View>
                {
                  record.map((item,index) => (
                      <Text className='search-label' key={index} onClick={this.goValue.bind(this,item)}>
                        {item}
                      </Text>
                    )
                  )
                }
              </View>
            )
          }
        </View>

        {/*<View className='search-text'>大家都在搜</View>*/}
        {/*<View className='label-box'>*/}
          {/*{hotList.map((item,index)=>{*/}
            {/*return (*/}
              {/*<View className='search-label' key={index} onClick={this.goValue.bind(this,item.keyword)}>{item.keyword}</View>*/}
            {/*)*/}
          {/*})}*/}
        {/*</View>*/}
      </View>
    )
  }
}

export default Search;
